import React, { useState, useEffect } from 'react';
import WordService from '../services/wordService';

const StatisticsPage: React.FC = () => {
  const [stats, setStats] = useState({
    totalWords: 0,
    masteredWords: 0,
    learningWords: 0,
    todayStudied: 0,
    streak: 0
  });

  useEffect(() => {
    loadStatistics();
  }, []);

  const loadStatistics = async () => {
    try {
      const statistics = await WordService.getStatistics();
      setStats(statistics);
    } catch (error) {
      console.error('Failed to load statistics:', error);
    }
  };

  const masteryRate = stats.totalWords > 0
    ? Math.round((stats.masteredWords / stats.totalWords) * 100)
    : 0;

  return (
    <div className="statistics-page">
      <h2>学习统计</h2>

      <div className="stats-grid">
        <div className="stat-card">
          <h3>{stats.todayStudied}</h3>
          <p>今日学习</p>
        </div>

        <div className="stat-card">
          <h3>{stats.streak}</h3>
          <p>连续打卡</p>
        </div>

        <div className="stat-card">
          <h3>{stats.masteredWords}</h3>
          <p>已掌握</p>
        </div>

        <div className="stat-card">
          <h3>{masteryRate}%</h3>
          <p>掌握率</p>
        </div>
      </div>

      <div className="progress-section">
        <h3>学习进度</h3>
        <div className="progress-bar-container">
          <div className="progress-labels">
            <span>已掌握: {stats.masteredWords}</span>
            <span>学习中: {stats.learningWords}</span>
            <span>未学习: {stats.totalWords - stats.masteredWords - stats.learningWords}</span>
          </div>
          <div className="progress-bars">
            <div
              className="mastered-bar"
              style={{ width: `${(stats.masteredWords / Math.max(1, stats.totalWords)) * 100}%` }}
            ></div>
            <div
              className="learning-bar"
              style={{ width: `${(stats.learningWords / Math.max(1, stats.totalWords)) * 100}%` }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default StatisticsPage;
